<template>
	<div class="betting-analysis-item">
		<div class="betting-analysis-item__title">{{ title }}</div>
		<div class="betting-analysis-item__content">
			<div
				v-for="(item, index) in chartData"
				:key="index"
				class="selection"
				:class="[item.type, activeIndex === index ? 'active' : '']"
				:style="{ flex: item.percent }"
				@click="activeIndex = index">
				<div class="percent">{{ item.percent }}%</div>
				<div class="bar"></div>
				<div class="value" v-show="item.value">
					<up-amount v-if="currency" :value="item.value"></up-amount>
					<span v-else>{{ item.value }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { UpAmount } from '@/components/up'

const props = defineProps({
	title: {
		type: String
	},
	data: {
		type: Array<any>,
		default: () => []
	},
	currency: {
		type: Boolean,
		default: false
	}
})

const activeIndex = ref(0)

const chartData = computed(() => {
	const total = props.data.reduce((prev, curr) => prev + curr.value, 0)
	return props.data.map(({ value, type }) => ({
		value,
		type,
		percent: Math.round((value * 1000) / total) / 10
	}))
})

watch(
	() => () => props.data,
	() => {
		let indexCurr = 0
		let valueCurr = 0
		props.data.forEach((item: any, index) => {
			if (item.value > valueCurr) {
				valueCurr = item.value
				indexCurr = index
			}
		})
		activeIndex.value = indexCurr
	},
	{ immediate: true }
)
</script>
<style lang="scss" scoped>
@use '@/styles/mixins.scss' as *;
.betting-analysis-item {
	&__title {
		text-align: center;
		font-size: 12px;
		line-height: 16px;
		padding: 8px 0;
		@include font-bold();
	}
	&__content {
		display: flex;
		padding: 0 20px;
		.selection {
			cursor: pointer;
			.percent {
				font-size: 16px;
				line-height: 18px;
				@include font-bold();
			}
			.bar {
				width: 100%;
				height: 4px;
				margin-top: 2px;
				transition: all 0.3s;
			}
			.value {
				visibility: hidden;
				font-size: 12px;
				line-height: 16px;
				transition: all 0.3s;
			}
			&:not(:first-child) {
				margin-left: 4px;
			}
			&.active {
				.bar {
					height: 6px;
					margin-top: 0px;
				}
				.value {
					visibility: visible;
				}
			}
			&.home {
				color: var(--color-home);
				.bar {
					background-color: var(--color-home);
				}
			}
			&.away {
				text-align: right;
				color: var(--color-away);
				.bar {
					background-color: var(--color-away);
				}
				.value {
					.up-amount {
						justify-content: flex-end;
					}
				}
			}
			&.draw {
				text-align: center;
				color: var(--color-text-3);
				.bar {
					background-color: var(--color-text-3);
				}
			}
		}
	}
}
</style>
